<template>
  <div class="header fixed top-0 flex justify-between items-center h-[8vh] w-full z-50 text-white box-border px-6 py-3">
    <div>
      {{ $t('ByteDanceTitle') }}
    </div>
    <div class="flex justify-start items-center gap-4">
      <div class="lang-btn"  @click="showPicker = true">
        <span>{{ $t(lang) }}</span>
        <van-icon name="arrow" class="ml-[2px]" color="#fff" />
      </div>
      <van-icon 
        :name="more" 
        size="1.5rem" 
        class="!cursor-pointer" 
        @click="showTopPicker = true"
      />
    </div>
    <van-popup  v-model:show="showTopPicker" position="top" :style="{ height: '41%' }">
       <div class="box-border px-6 py-3">
          <div class="flex justify-between items-center text-[#515151]">
            <div>{{ $t('ByteDanceTitle') }}</div>
            <van-icon 
              :name="moreBlack" 
              size="1.5rem" 
              class="!cursor-pointer" 
              color="#1c1c1c"
              @click="showTopPicker = false"
            />
          </div>
         <div 
            class="text-black text-[14px] mt-5"
          >
           <div class="box-border py-2.5" @click="open('/')">
            {{ $t('tabbar.homeTitle') }}
          </div>
           <div class="box-border py-2.5" @click="open('/hot')">
            {{ $t('hotRecord') }}
          </div>
           <div class="box-border py-2.5" @click="open('/about')">
            {{ $t('aboutUS') }}
          </div>
           <div class="box-border py-2.5" @click="open('/login')">
            {{ $t('involved') }}
           </div>
           <div class="box-border py-2.5" @click="open('/news')">
            {{ $t('news') }}
          </div>
         </div>
       </div>
    </van-popup>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :columns="columns.map(v => ({ text: t(v.text), value: v.value }))"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import more from "@/assets/images/more.png"

import moreBlack from "@/assets/images/more-black.png"

import { useRouter } from "vue-router"

import { useI18n } from 'vue-i18n'

import { useUserStore } from "@/store/user"

import { getI18nLanguage, SUPPORT_LOCALES_LIST, useLocales } from '@/i18n'

const router = useRouter()

const user = useUserStore()

const { t } =  useI18n({ useScope: 'global' })

const lang = ref<string>(getI18nLanguage(user.lang))

const showPicker = ref<boolean>(false)

const showTopPicker = ref<boolean>(false)

const columns = SUPPORT_LOCALES_LIST

const onConfirm = ({ selectedValues }: { selectedValues: any[]}) => {
  useLocales(selectedValues[0])
  lang.value = getI18nLanguage(selectedValues[0])
  showPicker.value = false
}

const open = (url: string) => {
  showTopPicker.value = false
  router.push(url)
}
</script>

<style lang="less" scoped>
.header {
  background: rgba(0, 0, 0, 0.2);
}
.lang-btn {
  box-sizing: border-box;
  padding: 6px 10px 6px 14px;
  border: 1px solid #fff;
  border-radius: 200px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
}
</style>
